<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>注册</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="static/css/style.css" rel="stylesheet"/>
    <link href="static/css/login.min.css" rel="stylesheet"/>
    <link href="static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="favicon.ico"/>
    <style type="text/css">
        .signin-panel{
            width: 750px;
            margin: 10% auto 0;
        }
    </style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin">

<div class="signin-panel">

    <div class="row ">
        <div class="col-md-8 col-md-offset-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>找回密码</h5>
                </div>
                <div class="ibox-content">

                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li id="check" class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 身份验证</a>
                            </li>
                            <li id="change" class="hidden"><a data-toggle="tab" href="#tab-2" aria-expanded="false">修改密码</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <label>邮箱：</label>
                                    <div class="input-group">
                                        <input id="email" type="email" placeholder="请输入您注册的E-mail" class="form-control">
                                        <span class="input-group-btn">
                                        	<button id="getCode" type="button" class="btn btn-primary">发送验证码</button>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <label>验证码：</label>
                                        <input id="code" type="text" placeholder="请输入验证码" class="form-control">
                                    </div>
                                    <br/><br/>
                                    <div class="form-group">
                                        <a href="login.jsp" class="btn pull-right" type="button">返回</a>
                                        <button id="next" class="btn btn-primary pull-right" type="button">确定</button>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <form class="form-horizontal" id="changePwdForm">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">密码：</label>
                                            <div class="col-sm-8">
                                                <input id="password" type="password" name="password" placeholder="密码" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">确认密码：</label>
                                            <div class="col-sm-8">
                                                <input type="password" name="confirm_password" placeholder="确认密码" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-3 col-sm-8">
                                                <button class="btn btn-sm btn-success pull-right" type="submit">修改密码</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input class="response_code" type="hidden"/>

<script src="static/js/jquery.min.js"></script>
<script src="static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/ajax/libs/layer/layer.min.js"></script>
<script src="static/ruoyi/js/ry-ui.js"></script>
<script>
    $("#getCode").click(function(){
        let email = $("#email").val();
        if(!check_email(email)){
            return false;
        }
		
        $.ajax({
            type:"GET",
            url:"getCode.do?email="+email,
            dataType:"json",
            success:function (response) {

                if(response.Result == "success"){
                    $.modal.alert("验证码已发送至："+email);

                    $(".response_code").val(response.code);

                } else {
                    $.modal.alert(response.message);
                }
            }
        });
    });

    function check_email(email){
        if(email == null || email == ""){
            $.modal.alert("邮箱不能为空");
            return false;
        }
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email)){
            $.modal.alert("邮箱格式不正确");
            return false;
        }
        
        return true;
    }

    $("#next").click(function(){
        let email = $("#email").val();
        if(!check_email(email)){
            return false;
        }

        let response_code = $(".response_code").val();
        let code = $("#code").val();

        if(code === response_code && code !== ""){
            $("#change a").click();
            $("#check").toggleClass("hidden");
            $("#change").toggleClass("hidden");
        } else {
            $.modal.alert("验证码错误");
        }
    });


    $(function() {
        validateRule();
    });

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#changePwdForm").validate({
            rules: {
                password: {
                    required: true,
                    minlength : 6,
                    maxlength : 18
                },
                confirm_password: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                }
            },
            messages: {
                password: {
                    required: icon + "请输入您的密码",
                    minlength : icon +"密码长度不能低于6位",
                    maxlength : icon +"密码长度不能高于18位"
                },
                confirm_password:{
                    equalTo : "两次密码不一致"
                }
            },
            submitHandler: function() {

                let email = $("#email").val();
                let password = $("#password").val();

                $.modal.alert("您的修改密码为："+password);
                
                $.ajax({
                    url:"alter.do",
                    type:"POST",
                    dataType:"json",
                    data : {
                        email : email,
                        password : password
                    },
                    success : function (response) {
                        console.log(response);
                        $.modal.alert(response.message);
                    }
                });
            }
        })
    }

</script>
</body>
</html>
